<template>
  <!-- 组件模板页面: 要求必须有一个根标签 -->
  <div>
    <p class="title">{{ num }}</p>
    <button @click="num++">按钮</button>
    <!-- 3. 使用组件 -->
    <HelloComponent />
    <HelloComponent></HelloComponent>
    <hello-component />
    <hello-component></hello-component>
  </div>
</template>

<script>
// 1. 引入其他组件
import HelloComponent from "./views/HelloComponent";
// 默认暴露组件配置对象
export default {
  name: "App", // 在Vue调试工具显示的名称
  data() {
    // data必须写成函数形式
    // data如果用对象形式，组件复用时，多个组件会共享同一个data数据，将来更新会出问题
    // data如果用函数形式,组件复用时,调用data函数产生一个新的data数据，不会共享
    return {
      num: 0,
    };
  },
  // 2. 注册组件
  components: {
    HelloComponent,
  },
};
</script>

<style lang="scss">
/*
  正常：css
  加上 lang="scss" lang="sass": sass
  加上 lang="less": less
*/
.title {
  color: red;
  font-size: 30px;
}
</style>
